<template>
  <view class="container">

    <custom-status-bar></custom-status-bar>

    <!-- 头部导航 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<uni-icons type="left" size="20" color="#1890ff"></uni-icons>
				<text>返回</text>
			</view>
			<text class="title">我的收藏</text>
		</view>

    <!-- 蓝色横幅 -->
    <view class="blue-banner"></view>

    <!-- 商品列表 -->
    <view class="product-list" v-if="products.length>0">
      <view v-for="(product,index) in products" :key="product.id" class="product-item" >
        <image class="product-image" :src="product.smallImg" mode="aspectFill" @click="gotoDetail(product.pid)" />
		<view class="product-info">	 
        <view class="hot-tag" v-if="product.isHot">热卖</view>
        <view class="product-name" @click="gotoDetail(product.pid)">{{ product.name }}</view>
        <view class="product-english" @click="gotoDetail(product.pid)">{{ product.enname }}</view>
		<view class="price-separator">
			<view class="price" @click="gotoDetail(product.pid)">¥{{ product.price }}</view>
			<uv-icon name="trash" class="separator" size="25" @click="removeLike(product.pid,index)"></uv-icon>
		</view>
		</view>
      </view>
    </view>
	
	<uv-empty mode="favor" v-else></uv-empty>	
	
	
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import CustomStatusBar from '../../components/common/CustomStatusBar.vue';
import { getCollectList,removeCollect } from "@/api/index.js"
import { onShow} from '@dcloudio/uni-app'

const products = ref([])

const token =ref(uni.getStorageSync('coffee_token'))

// onMounted( () => {
// 	uni.showLoading({
// 		title:'正在加载',
// 		success:async()=>{
// 			const res = await getCollectList(uni.getStorageSync('coffee_token'))
// 			// console.log("res", res)
// 			if (res.code === 2000) {
// 			  products.value = res.result
// 			}
			
// 		},
// 		complete:()=>{
// 			uni.hideLoading()
// 		}
// 	})
	
// })


onShow(() => {
	uni.showLoading({
		title:'正在加载',
		success:async()=>{
			const res = await getCollectList(uni.getStorageSync('coffee_token'))
			// console.log("res", res)
			if (res.code === 2000) {
			  products.value = res.result
			}
			
		},
		complete:()=>{
			console.log("1")
			uni.hideLoading()
		}
	})
	
})


// 取消收藏
const removeLike = (pid,index)=>{
	
	
	uni.showModal({
		content:'确认删除收藏吗？',
		success:async(response)=>{
			if(response.confirm){
				const res = await removeCollect(pid,token.value)
				products.value.splice(index,1)
				console.log("removeLike",res)
				if(res.code ===900){
					uni.showToast({
						title:res.msg
					})
			}
		  }		
		}
	})
	
	
	
	
	

	
	
	
}

const gotoDetail = (pid) => {
  uni.navigateTo({ url: `/pages/detail/detail?pid=${pid}` });
}


// 返回按钮点击事件
const goBack = () => {
 const pages = getCurrentPages();
 if (pages.length > 1) uni.navigateBack();
 	else  uni.switchTab({ url: '/pages/index/index' });
};
</script>

<style lang="scss" scoped>
.container {
padding: 0 20rpx 150rpx 20rpx;

  background-color: #f5f5f5;
}


.header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	border-bottom: 1rpx solid #eee;
}

.back-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	font-size: 28rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.blue-banner {
  height: 80rpx;
  background-color: #4A90E2;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
	position: relative;
  background: white;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;

  &:active {
    transform: scale(0.98);
  }

  .product-image {
    width: 100%;
    height: 240rpx;
  }

  .hot-tag {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background-color: #ff4949;
    color: white;
    font-size: 24rpx;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
    z-index: 1;
  }

  .product-info {
    padding: 15rpx;
	display: flex;
	 flex-direction: column;

    .product-name {
      font-size: 28rpx;
      margin-bottom: 10rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .product-english {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 10rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
	
	.price-separator{
		
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		
		.price {
		  color: #ff4949;
		  font-size: 28rpx;
		  font-weight: bold;
		}
		
		
		.separator{
			// position: absolute;
			// right:0;
			// bottom: 0;
			
		}
		
		
	}
	
  }
}





.empty-state {
  margin-top: 100rpx;
}
</style>